<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{ age }}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from "@/components/ArtList.vue";
export default {
  components: {
    ArtList,
  },
  data() {
    return {
      age: 20,
    };
  },
  // 数据创建阶段四个钩子函数
  // 第一个钩子函数
  beforeCreate() {
    console.log("beforeCreate", this.age);
  },
  // 第二个钩子函数
  created() {
    console.log("created", this.age);
  },
  // 第三个钩子函数
  beforeMount() {
    console.log("beforeMount", this.$refs.h2);
  },
  // 第四个钩子函数
  mounted() {
    console.log("mounted", this.$refs.h2);
  },
  // 数据更新阶段两个钩子函数
  // 第五个钩子函数
  beforeUpdate() {
    console.log("beforeUpdate", this.age, this.$refs.p.innerHTML);
  },
  // 第六个钩子函数
  updated() {
    console.log("update", this.age, this.$refs.p.innerHTML);
  },
  // 第七个钩子函数
  beforeDestroy() {
    console.log("第7个", "组件即将被销毁");
    console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  },
  // 第八个钩子函数
  destroyed() {
    console.log("第8个", "组件已经被销毁");
    console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  },
  // 第十一个钩子函数
  errorCaptured(err, vm, info) {
    console.log(err.message); // 只输出后代组件的错误描述信息
    console.log(vm); // 发生错误的组件实例
    console.log(info); // 一个描述信息
    return false; // 阻止错误继续向上层传播（错误会从子向父一层层传播）
  },
};
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>